<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
    <div>
      <div
        class="xinf"
        v-for="(item, index) in stlist"
        :key="index"
        @click="delists(item)"
      >
        <div class="xinimg">
          <img :src="item.img" alt="" />
        </div>
        <div class="right">
          <div class="p1">
            <span>{{ item.title }}</span>
          </div>
          <p class="p2">
            <span class="span2">{{ item.city }}</span>
            <span class="span3">
              <b>{{ item.price }}</b>
            </span>
          </p>
          <p class="p3">
            {{ item.room }}室{{ item.living_room }}厅{{ item.acreage }}
          </p>
          <p class="p3">{{ item.address }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { reslist } from "../../api/index";
import { Toast } from "vant";
import { th } from "@dcloudio/vue-cli-plugin-uni/packages/postcss/tags";
export default {
  data() {
    return {
      stlist: [],
      value: "",
      value1: 0,
      value2: "a",
      value3: 11,
      option1: [
        { text: "区域", value: 0 },
        { text: "龙华区", value: 1 },
        { text: "青山区", value: 2 },
        { text: "美兰区", value: 3 },
      ],
      option2: [
        { text: "价格", value: "a" },
        { text: "10000以下", value: "b" },
        { text: "1000-15000", value: "c" },
        { text: "15000-20000", value: "d" },
      ],
      option3: [
        { text: "类型", value: 11 },
        { text: "住宅", value: 12 },
        { text: "别墅", value: 13 },
        { text: "商铺", value: 14 },
      ],
    };
  },
  async mounted() {
    let res = await reslist({ page: 1, size: 10 });
    this.stlist = res.data.data;
    console.log(res.data.data);
  },
  methods: {
    onSearch(val) {
      if(val!=""){
        this.stlist=this.stlist.filter((item) => {
          return item.title.includes(val)
        })
      }else{
        window.location.reload()
      }
    },
    onCancel() {
      Toast("取消");
    },
    delists(item) {
      this.$router.push({
        path: "/pages/Detaileds/Detaileds",
        query: item,
      });
    },
  },
};
</script>
  
  <style>
.xinf {
  width: 95%;
  height: 100px;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.xinimg {
  width: 30%;
  height: 100px;
  margin-left: 5%;
}
.xinimg img {
  width: 100%;
  height: 80px;
}
.right {
  width: 65%;
  margin-left: 5%;
  height: 200px;
}
.span1 {
  background: rgb(61, 202, 32);
  padding: 3px;
  margin: 0px 5px;
  color: #fff;
}
.p1 {
  font-size: 12px;
}
.p2 {
  display: flex;
  justify-content: space-between;
}
.span2 {
  font-size: 12px;
  color: rgb(178, 176, 176);
}
.span3 {
  color: rgb(42, 183, 56);
}
.p3 {
  font-size: 12px;
  color: rgb(178, 176, 176);
}
</style>
  